<template>
  <!-- 侧边栏 -->
  <el-aside :width="isCollapse ? '64px' : '200px'">
    <!-- 实现折叠展开 -->
    <div class="toggle-button" @click="toggleCollapse">|||</div>
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">竞赛</span>
        </template>
        <el-menu-item-group>
          <span slot="title">举办类别</span>
          <el-menu-item
            :index="child.id"
            v-for="child in contestCategoryList"
            :key="child.id"
            @click="handleContestCategoryClick(child.category)"
            >{{ child.category }}</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "myIndexAside",
  data() {
    return {
      isCollapse: false,
      contestCategoryList: {},
    };
  },
  methods: {
    async getContestCategoryList() {
      const { data: res } = await this.$axios.get("/contest/category");
      if (res.status !== 200) {
        return this.$message.error(res.message);
      }
      this.contestCategoryList = res.result;
    },
    handleContestCategoryClick(category) {
      this.$router.push({ path: "index/${category}" });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
  mounted() {
    this.getContestCategoryList();
  },
};
</script>

<style lang="less" scoped>
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
